<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath }"/>
<link rel="stylesheet" href="${ctx }/resources/js/datepicker/css/bootstrap-datepicker3.standalone.min.css"/>
<script type="text/javascript" src="${ctx }/resources/js/datepicker/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="${ctx }/resources/js/datepicker/locales/bootstrap-datepicker.zh-CN.min.js"
        charset="UTF-8"></script>

<style type="text/css">
    .noform {
        padding: 7px 0px 0px 12px;
        font-size: 14px;
    }
</style>
<div class="page-header">
    <h1>
        个人资料
    </h1>
</div>

<div class="row" style="margin-top:5px;">
    <div class="col-xs-12">
        <form class="form-horizontal" role="form" method="post">
            <div class="form-group">
                <button id="btnEdit" type="button" class="btn btn-success btn-sm" style="margin-left: 13px;">
                    <i class="fa fa-user-plus"></i>&nbsp;编辑
                </button>
                <button id="btnAdd" type="button" onclick="javascript:$('#userInfoForm').submit();"
                        class="btn btn-success btn-sm" style="margin-left: 13px; display: none;">
                    <i class="fa fa-user-plus"></i>&nbsp;保存
                </button>
                <button id="btnBack" type="button" class="btn btn-info btn-sm">
                    <i class="fa fa-undo"></i>&nbsp;返回
                </button>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right">邮箱:</label>
                <div class="col-sm-10 noform">
                    ${userEntity.accountName }
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right">所属角色:</label>
                <div class="col-sm-10 noform">
                    ${userEntity.role.name}
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right">用户描述:</label>
                <div class="col-sm-10 noform">
                    <c:if test="${empty userEntity.description }">无</c:if>
                    <c:if test="${!empty userEntity.description }">${userEntity.description }</c:if>
                </div>
            </div>
        </form>
        <div class="hr hr-dotted"></div>
        <form id="userInfoForm" name="userInfoForm" class="form-horizontal" role="form" method="post">
            <input type="hidden" name="id" id="userInfoId" value="${userEntity.id }">
            <input type="hidden" name="userInfo.id" value="${userEntity.id }">
            <input type="hidden" name="userInfo.email" value="${userEntity.accountName }"/>
            <input type="hidden" name="role.id" value="${userEntity.role.id }">
            <input type="hidden" name="email" value="${userEntity.accountName }">
            <div id="lableDiv">
                <div class="form-group">
                    <label class="control-label col-sm-1 no-padding-right">真实姓名:</label>
                    <div class="col-sm-10 noform">
                        ${userEntity.userName }
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1 no-padding-right">性别:</label>
                    <div class="col-sm-10 noform">
                        <c:if test="${userEntity.userInfo.sex eq 1}">男</c:if>
                        <c:if test="${userEntity.userInfo.sex eq 2}">女</c:if>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1 no-padding-right" for="birthday">出生日期:</label>
                    <div class="col-sm-10 noform">
                        <fmt:formatDate value="${userEntity.userInfo.birthday }" pattern="yyyy-MM-dd"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1 no-padding-right" for="telephone">手机号码:</label>
                    <div class="col-sm-10 noform">
                        ${userEntity.userInfo.telephone }
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1 no-padding-right" for="address">联系地址:</label>
                    <div class="col-sm-10 noform">
                        ${userEntity.userInfo.address }
                    </div>
                </div>
            </div>
            <div id="formDiv" style="display: none;">
                <div class="form-group">
                    <label class="control-label col-sm-1 no-padding-right">姓名:</label>
                    <div class="col-sm-10">
                        <div class="clearfix">
                            <input class="form-control" name="userName" id="userName" type="text"
                                   value="${userEntity.userName }" placeholder="姓名..."/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1 no-padding-right" for="userInfo.sex">性别</label>
                    <div class="col-sm-10">
                        <div class="radio">
                            <label>
                                <input name="userInfo.sex" type="radio" class="ace input-lg" value="1"
                                       <c:if test="${userEntity.userInfo.sex eq 1}">checked</c:if>>
                                <span class="lbl bigger-110">男</span>
                            </label>
                            <label>
                                <input name="userInfo.sex" type="radio" class="ace input-lg" value="2"
                                       <c:if test="${userEntity.userInfo.sex eq 2}">checked</c:if>>
                                <span class="lbl bigger-110">女</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1 no-padding-right" for="userInfo.birthday">出生日期</label>
                    <div class="col-sm-10">
                        <div class="clearfix">
                            <input class="form-control date-picker" name="userInfo.birthday" id="birthday" type="text"
                                   value="<fmt:formatDate value="${userEntity.userInfo.birthday }" pattern="yyyy-MM-dd"/>"
                                   placeholder="出生日期..."/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1 no-padding-right" for="userInfo.telephone">手机号码</label>
                    <div class="col-sm-10">
                        <div class="clearfix">
                            <input class="form-control" name="userInfo.telephone" id="telephone" type="text"
                                   value="${userEntity.userInfo.telephone }" placeholder="手机号码..."/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1 no-padding-right" for="userInfo.address">联系地址</label>
                    <div class="col-sm-10">
                        <div class="clearfix">
                            <input class="form-control" name="userInfo.address" id="address" type="text"
                                   value="${userEntity.userInfo.address }" placeholder="联系地址..."/>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">

    $(document).ready(function () {
        initButtonClick();
        initBirthday();
        validateUserInfoForm();
    });


    /**
     *  初始化绑定按钮事件
     */
    function initButtonClick() {
        $("#btnEdit").click(function () {
            //按钮切换
            $(this).hide();
            $("#btnAdd").show();
            //表单切换
            $("#lableDiv").hide();
            $("#formDiv").show();
        });

        $("#btnAdd").click(function () {
            $('#userInfoForm').submit();
        });

        $("#btnBack").click(function () {
            top.location.href = '../../index.html';
        });
    }


    /**
     * 初始化日期插件
     */
    function initBirthday() {
        $("#birthday").datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            language: 'zh-CN',
            todayHighlight: true,
            clearBtn: true,
            immediateUpdates: true,
            clearDate: function () {
                $("#birthday").val('').datepicker('update');
            }
        });
    }

    /**
     * 初始化信息表达验证
     */
    function validateUserInfoForm() {
        jQuery.validator.addMethod("phone", function (value, element) {
            return this.optional(element) || /^1[3|4|5|7|8]\d{9}$/.test(value);
        }, "请输入11位手机号码");

        $('#userInfoForm').validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            ignore: "",
            rules: {
                userName: {
                    required: true
                },
                "userInfo.sex": {
                    required: true
                },
                "userInfo.birthday": {
                    required: true
                },
                "userInfo.telephone": {
                    required: true,
                    phone: 'required'
                },
                "userInfo.address": {
                    required: true
                }
            },
            messages: {
                userName: "请填写真实姓名",
                "userInfo.sex": "请选择性别",
                "userInfo.birthday": "请填写出生日期",
                "userInfo.telephone": {
                    required: "请填写手机号码",
                    phone: "请填写11位手机号码"
                },
                "userInfo.address": "请填写联系地址"
            },
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },
            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                if (element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                    var controls = element.closest('div[class*="col-"]');
                    if (controls.find(':checkbox,:radio').length > 1) {
                        controls.append(error);
                    }
                    else {
                        error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                    }
                } else if (element.is('.select2')) {
                    error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                } else if (element.is('.chosen-select')) {
                    error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                } else {
                    error.insertAfter(element.parent());
                }
            },
            submitHandler: function (form) {
                movic.common.commit('userInfoForm', '/user/edit.html', '/user/infoUI.html?id=' + $("#userInfoId").val());
            }
        });
    }
</script>